<template>
  <u-transition
    :show="true"
    mode="fade-up"
    :duration="300"
    :custom-style="{ width: '100%' }"
    :style="{ 'transition-delay': animationDelay + 's' }"
  >
    <view class="card-item">
      <!-- 卡片头部 -->
      <view class="card-header">
        <view class="card-type">
          <text class="type-text">{{ item.category_name }}</text>
        </view>
      </view>

      <!-- 卡片内容 -->
      <view class="card-content">
        <!-- 培训状态盖章 -->
        <view
          class="card-status"
          :class="{
            'status-not-started': (item.teach_condition == 0 || item.teach_condition === '0'),
            'status-in-progress': (item.teach_condition == 1 || item.teach_condition === '1'),
            'status-finished': (item.teach_condition == 2 || item.teach_condition === '2'),
            'status-no-list': (item.teach_condition == 3 || item.teach_condition === '3'),
          }"
        >
          <text v-if="item.teach_condition == 0 || item.teach_condition === '0'">未开始</text>
          <text v-else-if="item.teach_condition == 1 || item.teach_condition === '1'">进行中</text>
          <text v-else-if="item.teach_condition == 2 || item.teach_condition === '2'">已结束</text>
          <text v-else-if="item.teach_condition == 3 || item.teach_condition === '3'">未导入名单</text>
          <text v-else>调试:{{item.teach_condition}}|{{typeof item.teach_condition}}</text>
        </view>

        <!-- 培训名称 -->
        <view class="training-title">
          <text>{{ item.teach_name }}</text>
        </view>

        <!-- 培训地点 -->
        <view class="info-item location">
          <view class="info-icon location-icon"></view>
          <text class="info-text">{{ item.teach_address }}</text>
        </view>

        <!-- 签到人 -->
        <view class="info-item person">
          <view class="info-icon person-icon"></view>
          <text class="info-text">{{ item.name }}</text>
        </view>

        <!-- 工号 - 移到签到人下方 -->
        <view class="info-item id">
          <view class="info-icon id-icon"></view>
          <text class="info-text">工号: {{ item.userid }}</text>
        </view>

        <!-- 培训时间 -->
        <view class="time-section">
          <view class="info-icon time-icon"></view>
          <text class="time-range">{{ formatTime(item.start_time) }} - {{ formatTime(item.end_time) }}</text>
        </view>
      </view>

      <!-- 卡片底部 -->
      <view class="card-footer">
        <view class="view-detail" @click="viewDetail">
          <text>查看详情</text>
          <view class="arrow-right-icon"></view>
        </view>
      </view>
    </view>
  </u-transition>
</template>

<script>
export default {
  name: "TrainingCard",
  props: {
    item: {
      type: Object,
      required: true,
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    animationDelay() {
      return this.index * 0.05;
    },
  },
  methods: {
    viewDetail() {
      // 🔧 触发父组件的view-detail事件，传递培训ID和索引
      // 优先使用 teach_id，如果为0则使用 tid 作为备选
      const teachId = this.item.teach_id || this.item.tid || this.item.id || 0;
      this.$emit('view-detail', this.index, teachId, this.item);
    },
    formatTime(timestamp) {
      // alert(timestamp);
      if (!timestamp) return "";
      let dataString = timestamp * 1000;

      // 将dataString转换为Date对象
      var time = new Date(dataString);

      // 获取年份
      var year = time.getFullYear();

      // 获取月份，注意月份是从0开始计数的，所以要加1
      var month = time.getMonth() + 1;

      // 获取日期
      var day = time.getDate();

      // 获取小时
      var hour = time.getHours();

	  var minute = time.getMinutes();

    return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute);
    },
  },
};
</script>

<style lang="scss" scoped>
.card-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
  position: relative;
  border-left: 4rpx solid transparent;
}

.card-item:active {
  transform: scale(0.985);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
}

.card-item.status-not-started {
  border-left-color: #909399;
}

.card-item.status-in-progress {
  border-left-color: #00bfff;
}

.card-item.status-finished {
  border-left-color: #19be6b;
}

.card-item.status-no-list {
  border-left-color: #ff4500;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 24rpx;
  background: linear-gradient(to right, #fbfcff, #f9fbff);
  border-bottom: none;
}

.card-type {
  position: relative;
  padding: 4rpx 6rpx 4rpx 16rpx;
  border-radius: 8rpx;
  background-color: #f7f9ff;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.card-type::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4rpx;
  bottom: 4rpx;
  width: 4rpx;
  background-color: #2979ff;
  border-radius: 2rpx;
}

.card-type::after {
  content: none;
}

.type-text {
  color: #2979ff;
  font-size: 24rpx;
  font-weight: 500;
  padding: 6rpx 8rpx;
  margin-left: 4rpx;
}

.card-status {
  position: absolute;
  top: 30%;
  right: 20rpx;
  font-size: 20rpx;
  font-weight: 700;
  width: 140rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8rpx;
  transform: rotate(-8deg);
  border: 3rpx solid;
  z-index: 5;
  opacity: 0.9;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
  text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
  letter-spacing: 1rpx;
  clip-path: polygon(10% 0%, 90% 0%, 100% 25%, 90% 100%, 10% 100%, 0% 25%);
}

.status-not-started {
  color: #606266;
  border-color: #909399;
  background: radial-gradient(
    circle,
    rgba(144, 147, 153, 0.2) 0%,
    rgba(249, 250, 251, 0.95) 70%,
    rgba(240, 242, 245, 0.9) 100%
  );
}

.status-not-started::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 70%;
  border: 1rpx dashed #909399;
  border-radius: 4rpx;
  opacity: 0.6;
  clip-path: polygon(8% 0%, 92% 0%, 100% 30%, 92% 100%, 8% 100%, 0% 30%);
}

.status-in-progress {
  color: #1890ff;
  border-color: #1890ff;
  background: radial-gradient(
    circle,
    rgba(24, 144, 255, 0.2) 0%,
    rgba(230, 247, 255, 0.95) 70%,
    rgba(240, 248, 255, 0.9) 100%
  );
  animation: pulse 2s infinite;
}

.status-in-progress::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 70%;
  border: 1rpx dashed #1890ff;
  border-radius: 4rpx;
  opacity: 0.7;
  clip-path: polygon(8% 0%, 92% 0%, 100% 30%, 92% 100%, 8% 100%, 0% 30%);
}

@keyframes pulse {
  0% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.03); }
  100% { transform: rotate(-8deg) scale(1); }
}

.status-finished {
  color: #52c41a;
  border-color: #52c41a;
  background: radial-gradient(
    circle,
    rgba(82, 196, 26, 0.2) 0%,
    rgba(246, 255, 237, 0.95) 70%,
    rgba(237, 247, 230, 0.9) 100%
  );
}

.status-finished::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 70%;
  border: 1rpx solid #52c41a;
  border-radius: 4rpx;
  opacity: 0.8;
  clip-path: polygon(8% 0%, 92% 0%, 100% 30%, 92% 100%, 8% 100%, 0% 30%);
}

.status-finished::after {
  content: "✓";
  position: absolute;
  font-size: 14rpx;
  color: #52c41a;
  font-weight: 900;
  top: 8rpx;
  right: 15rpx;
}

.status-no-list {
  color: #ff4d4f;
  border-color: #ff4d4f;
  background: radial-gradient(
    circle,
    rgba(255, 77, 79, 0.2) 0%,
    rgba(255, 241, 240, 0.95) 70%,
    rgba(255, 245, 238, 0.9) 100%
  );
}

.status-no-list::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 70%;
  border: 1rpx dashed #ff4d4f;
  border-radius: 4rpx;
  opacity: 0.7;
  clip-path: polygon(8% 0%, 92% 0%, 100% 30%, 92% 100%, 8% 100%, 0% 30%);
}

.status-no-list::after {
  content: "!";
  position: absolute;
  font-size: 16rpx;
  color: #ff4d4f;
  font-weight: 900;
  top: 6rpx;
  right: 18rpx;
}

.card-content {
  padding: 24rpx;
  position: relative;
}

.training-title {
  margin-bottom: 20rpx;
}

.training-title text {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  line-height: 1.4;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.info-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 16rpx;
  position: relative;
}

// 位置图标
.location-icon::before {
  content: "";
  position: absolute;
  width: 14rpx;
  height: 14rpx;
  background-color: #ff9900;
  border-radius: 50%;
  top: 4rpx;
  left: 9rpx;
}

.location-icon::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 10rpx;
  background-color: #ff9900;
  bottom: 6rpx;
  left: 16rpx;
  transform: rotate(-45deg);
}

// 人员图标
.person-icon::before {
  content: "";
  position: absolute;
  width: 12rpx;
  height: 12rpx;
  background-color: #2979ff;
  border-radius: 50%;
  top: 4rpx;
  left: 10rpx;
}

.person-icon::after {
  content: "";
  position: absolute;
  width: 16rpx;
  height: 14rpx;
  border: 1px solid #2979ff;
  border-radius: 6rpx;
  bottom: 6rpx;
  left: 8rpx;
}

// ID图标
.id-icon::before {
  content: "";
  position: absolute;
  width: 16rpx;
  height: 20rpx;
  border: 1px solid #909399;
  border-radius: 2rpx;
  top: 6rpx;
  left: 8rpx;
}

.id-icon::after {
  content: "";
  position: absolute;
  width: 10rpx;
  height: 1px;
  background-color: #909399;
  top: 12rpx;
  left: 11rpx;
  box-shadow: 0 4rpx 0 #909399, 0 8rpx 0 #909399;
}

// 时间图标
.time-icon::before {
  content: "";
  position: absolute;
  width: 18rpx;
  height: 18rpx;
  border: 1px solid #19be6b;
  border-radius: 50%;
  top: 6rpx;
  left: 6rpx;
}

.time-icon::after {
  content: "";
  position: absolute;
  width: 6rpx;
  height: 1px;
  background-color: #19be6b;
  top: 15rpx;
  left: 15rpx;
  transform: rotate(-45deg);
  transform-origin: 0 0;
  box-shadow: 0 -8rpx 0 #19be6b;
}

.info-text {
  font-size: 28rpx;
  color: #606266;
  line-height: 1.4;
}

.time-section {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: none;
}

.time-range {
  font-size: 26rpx;
  color: #606266;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

.card-footer {
  padding: 16rpx 24rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #fbfcff;
  border-top: none;
}

.view-detail {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  background-color: transparent;
  border: none;
  transition: all 0.2s ease;
}

.view-detail:active {
  transform: translateY(1rpx);
  opacity: 0.8;
}

.view-detail text {
  font-size: 26rpx;
  color: #2979ff;
  margin-right: 10rpx;
  font-weight: 500;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.5rpx;
}

.arrow-right-icon {
  width: 12rpx;
  height: 12rpx;
  border-top: 1.5rpx solid #2979ff;
  border-right: 1.5rpx solid #2979ff;
  transform: rotate(45deg);
}
</style>
